<template>
    <div class="page-login">
        <!-- 
            inline    是否行内
            :model="formValue"    model 是表单数据
            :rules="rules"      rules 校验规则
            label-placement="left"  标签靠左显示 （默认top)
            label-width="auto"      标签宽度，也可以是数值

         -->
        <n-form ref="formRef"
            :model="model" 
            :rules="rules"
            label-placement="left"
            label-width="auto"
            >
            <n-form-item  label="姓名：" path="user.name">
                <n-input v-model:value="model.user.name" placeholder="输入姓名" />
            </n-form-item>
            <n-form-item label="年龄：" path="user.age">
                <n-input v-model:value="model.user.age" placeholder="输入年龄" />
            </n-form-item>
            <n-form-item label="电话号码：" path="phone">
                <n-input v-model:value="model.phone" placeholder="电话号码" />
            </n-form-item>
            <n-form-item label="邮箱：" path="email">
                <n-input v-model:value="model.email" placeholder="邮箱" />
            </n-form-item>
            <n-form-item>
                <n-button block type="primary" @click="handleValidateClick">
                    登录
                </n-button>
            </n-form-item>
        </n-form>

    </div>
</template>

<script>
export default {
    name: 'login',
    //name的作用：方便keep-alive组件的include和exclude; 可以递归组件; 让devTools查看文件层级; 
    data() {
        return {
            // 表单数据
            model: {
                user: {
                    name: '',
                    age: ''
                },
                phone: '',
                email: '',
            },
            // 表单校验规则
            rules: {
                user: {
                    name: {
                        required: true, // 必填，表单对应的元素会显示*号
                        type: 'string',
                        message: '请输入姓名', // 校验不通过的时候 提示内容
                        trigger: 'blur' // 触发校验的方式
                    },
                    age: {
                        required: true,
                        type: 'number',
                        message: '请输入年龄',
                        trigger: ['input', 'blur'] //这两种情况都会触发校验
                    }
                },
                // phone: {
                //     required: true,
                //     message: '请输入电话号码',
                //     trigger: ['input','blur']
                // },
                phone: [ //多条校验规则时，可使用数组
                    { required: true, message: '请输入号码！', trigger: ['input', 'blur'] },
                    {
                        // 自定义校验
                        validator: (rule, value) => { //value是输入框的值
                            console.log('value: ', value);
                            if (value.length > 11) {
                                return false
                            }
                            return true;
                        },
                        type: 'number',
                        message: '号码最多11位',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value) => {
                            if (/^1\d{10}&/.test(value)) {
                                return false
                            } else {
                                return true;
                            }
                        },
                        type: 'number',
                        message: '号码格式不正确',
                        trigger: 'blur'
                    }
                ],
                email: {
                    required: true,
                    type: 'email',
                    message: '请输入正确的邮箱',
                    trigger: ['input', 'blur']
                },
            },
        }
    },
    methods: {
        handleValidateClick() {
            console.log('提交。');
        }
    }
}
</script>


<style scoped lang="scss">
.page-login {
    height: 100%;
    background-color: #f9c85c;
    display: flex;
    justify-content: center;
    align-items: center;
    .n-form{
        width: 400px;
        padding: 20px;
        border-radius: 15px;
        background-color:#fff;
        // text-align: center;
    }
}

.n-button{
    background: #55ef36;
}
</style>